<template>
  <div class="app-container" style="padding: 10px;">
    <el-row :gutter="10">
      <el-col :span="4">
        <ContentWrap>
          <RegionTree node-type="1" :node-click="handleDfqNodeClick"/>
        </ContentWrap>
      </el-col>

      <el-col :span="9">
        <ContentWrap>
          <div :style="getMapHeight">
            <drawregion ref="refDrawRegion" :callback="handleMapRegionDrawn"
                        @mapLoaded="handleMapLoaded" style="border: 1px solid #E3E3E3;"/>
          </div>
        </ContentWrap>
      </el-col>

      <el-col :span="11">
        <ContentWrap :style="getTabHeight">
          <el-tabs v-model="activeName" style="height: 100%;">
            <el-tab-pane label="基础信息" name="first" style="height: 100%;">
              <BasicDfqInfo ref="refBasicDfqInfo" />
            </el-tab-pane>

            <el-tab-pane label="设备挂接" name="second">
              <TerminalHooking ref="refBasicDfqTerminalHooking"/>
            </el-tab-pane>

            <el-tab-pane label="户表挂接" name="third">
              <MeterHooking :needImport="true" ref="refBasicDfqMeterHooking"/>
            </el-tab-pane>

            <el-tab-pane label="分区参数" name="fourth">
              <RegionParameters ref="refBasicDfqRegionParameters"/>
            </el-tab-pane>

            <el-tab-pane label="水平衡修正" name="fifth">
              <WaterBalanceFix ref="refBasicDfqWaterBalanceFix"/>
            </el-tab-pane>
          </el-tabs>
        </ContentWrap>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {updateZone} from "@/api/leakage/zone";
import RegionTree from '../../../components/RegionTree'
import drawregion from '@/components/L7Maps/drawregion.vue'
import BasicDfqInfo from '../../../components/BasicDfqInfo'
import TerminalHooking from '../../../components/TerminalHooking'
import MeterHooking from '../../../components/MeterHooking'
import RegionParameters from '../../../components/RegionParameters'
import WaterBalanceFix from '../../../components/WaterBalanceFix'
import {Marker, MarkerLayer, Popup} from "@antv/l7";
import {getZoneJoinTerminals} from "@/api/leakage/zoneJoin";

export default {
  name: "BasicDfq",
  components: {
    RegionTree,
    drawregion,
    BasicDfqInfo,
    TerminalHooking,
    MeterHooking,
    RegionParameters,
    WaterBalanceFix,
  },
  data() {
    return {
      mapScene: undefined,
      screenHeight: null,
      terminalMarkerLayer: undefined,
      activeName: 'first',
      editingZone: undefined,
      dfqTerminalList: []
    };
  },
  methods: {
    handleMapLoaded(scene) {
      this.mapScene = scene
      this.terminalMarkerLayer = new MarkerLayer();
    },
    handleDfqNodeClick(node) {
      const levelType = node.levelType
      if (levelType !== '1') {
        this.editingZone = undefined
        this.$message.error('请选择大分区节点')
      } else {
        this.editingZone = node
        setTimeout(() => {
          this.$refs.refDrawRegion.disableDraw()
          this.$refs.refDrawRegion.enableDraw(node, 1.065)
          this.loadDfqTerminals()
        }, 500)
        this.$refs.refBasicDfqInfo.updateEditingZone(node)
        this.$refs.refBasicDfqMeterHooking.updateEditingZone(node)
        this.$refs.refBasicDfqTerminalHooking.updateEditingZone(node)
        this.$refs.refBasicDfqRegionParameters.updateEditingZone(node)
        this.$refs.refBasicDfqWaterBalanceFix.updateEditingZone(node)
      }
    },
    handleMapRegionDrawn(mapData) {
      const {zoom, data} = mapData
      if (zoom && data) {
        this.editingZone.zoom = zoom
        this.editingZone.areaPoint = data
        updateZone(this.editingZone).then(res => {
          this.$message.success(res.msg)
        })
      }
    },
    loadDfqTerminals() {
      getZoneJoinTerminals({areaId: this.editingZone.areaId, terminalMark: 1}).then(res => {
        this.dfqTerminalList = res.rows
        this.addTerminalMarkerToMap()
      })
    },
    addTerminalMarkerToMap() {
      let point
      this.terminalMarkerLayer.clear()
      this.dfqTerminalList.forEach(t => {
        if (t.lng && t.lat) {
          point = [parseFloat(t.lng), parseFloat(t.lat)]

          let color = 'red';
          let title = '进水表'
          let markerIcon = `/images/inlet.png`
          if (t.used === '3') {
            color = 'green';
            title = '出水表'
            markerIcon = `/images/outlet.png`
          }
          const markerContent = `<div title="${title}"><img src="${markerIcon}" style="width: 40px;height: 40px;"></div>`
          let el = document.createElement('div')
          el.innerHTML = markerContent
          const marker = new Marker({element: el, draggable: false, offsets: [0, 0]}).setLnglat({
            lng: parseFloat(t.lng),
            lat: parseFloat(t.lat)
          })

          let popupContent = `<div style="text-align: center;color: #333333;font-size: 12px;">
                                <span style="color: ${color};">${title}：</span>
                            ${t.terminalName}
                            </div>`

          const popup = new Popup({
            offsets: [0, 45],
            closeButton: false,
            title: ''
          }).setHTML(popupContent)

          marker.setPopup(popup)
          marker.openPopup()

          this.terminalMarkerLayer.addMarker(marker);
        }
      })
      this.mapScene.addMarkerLayer(this.terminalMarkerLayer);
    },
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getMapHeight() {
      const h = this.screenHeight - 100
      return {height: h + 'px'}
    },
    getTabHeight() {
      const h = this.screenHeight - 68
      return {height: h + 'px'}
    }
  }
};
</script>
